<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="dota2.css"/>
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--首部-->
<div class="box">
    <div class="box1">
        <div class="box1-video">
            <video  class="video1" autoplay="" loop="" style="width: 100%;vertical-align: middle;display: inline-block;" poster="">
                <source  src="medio/monkeyking_2.mp4" />
            </video>
        <!--视屏上的内容-->
            <div class="box1-top">
                <!-- 头部 -->
                <div class="box1-header" >
                    <div class="link_1">
                        <a href="javascript:void(0)"  title="">
                            <img src="img/img-logo.png" alt="dota2 logo">
                        </a>
                        <div class="link_1-top">
                            <li>
                                <a href="javascript:void(0)"  target="_blank">
                                    <span class="lel-1">DOTA2官网</span>
                                    <span class="lel-2">HOME</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" target="_blank">
                                    <span class="lel-1">资料站</span>
                                    <span class="lel-2">DATA</span>
                                 </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" target="_blank">
                                    <span class="lel-1">视频站</span>
                                    <span class="lel-2">VIDEO</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" target="_blank">
                                    <span class="lel-1">玩家工坊</span>
                                    <span class="lel-2">WORKSHOP</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" target="_blank">
                                    <span class="lel-1">客服中心</span>
                                    <span class="lel-2">SERVICE</span>
                                </a>
                            </li>
                        </div>
                    </div>
                    <div class="link_2">
                        <div class="link_2-big">
                            <ul>
                                <li><a href="javascript:void(0)"  target="_blank">进入官网</a></li>
                                <li><a href="javascript:void(0)"  target="_blank">游戏下载</a></li>
                                <li><a href="javascript:void(0)"  target="_blank">用户注册</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="box1-content">
                    <!-- 广告 -->
                    <div class="advert_1 clearfix">
                        <ul>

                            <li class="advert-1-1">
                                <a href="javascript:void(0)"   target="_blank">
                                    <h4>第二届DOTA2亚洲邀请赛</h4>
                                    <img src="img/bg_111.jpg" />

                                    <div class="cover">
                                        <img src="img/bg_112.jpg" />
                                    </div>
                                </a>
                            </li>
                            <li class="advert-1-1" >
                                <a href="javascript:void(0)" target="_blank">
                                    <h4>TI7官方周边全球同步发售</h4>
                                    <img src="img/bg_302.jpg" />

                                    <div class="cover">
                                        <img src="img/bg_301.jpg"/>
                                    </div>
                                </a>
                            </li>
                            <li class="advert-1-1" style="margin-right:0">
                                <a href="javascript:void(0)"  target="_blank">
                                    <h4>DOTA2开启7.00新纪元</h4>
                                    <img src="img/bg_11.jpg"/>

                                    <div class="cover">
                                        <img src="img/bg_02.jpg"/>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>
        <div class="box2">
            <div class="box2-cover" >
                <div class="box2-cover-content">
                    <div class="link-main clearfix">
                        <a class="link-item1" href="javascript:void(0)"  target="_blank">
                            <div class="cover"></div>
                        </a>
                        <div class="link-item2">
                            <a class="link-item3" href="javascript:void(0)"   target="_blank">
                                <div class="cover"></div>
                            </a>

                        </div>
                        <div class="old-bg"></div>
                        <div class="new-bg"></div>

                    </div>
                </div>
            </div>
        </div>


</div>
        <script>
        $(function () {
            $(".link-item1").hover(function(){
                $(".old-bg").removeClass("bgchange");
                $(".new-bg").removeClass("bgchange");
            });
            $(".link-item2").hover(function(){
                $(".old-bg").addClass("bgchange");
                $(".new-bg").addClass("bgchange");
            });
        });
    </script>
</body>
</html>